<template>
    <div class="el-badge">
        <slot></slot>
        <!-- 可以为空 -->
        <sup
            v-show="!hidden && (content || content===0 || isDot)"
            v-text="content"
            class="el-badge__content"
            :class="[
                type?'el-badge__content--'+type:null,
                {
                    'is-fixed':$slots.default,
                    'is-dot':isDot
                }
            ]"
        >
        </sup>
    </div>
</template>
<script>
    export default{
        props:{
            value:[String,Number],
            max:Number,
            isDot:Boolean,
            hidden:Boolean,
            type:{
                type:String,
                validator(val){
                    return ['parmary',
                    'success','warning','info','danger'].indexOf(val)>-1;
                }
            }
        },
        computed:{
            content(){
                if(this.isDot) return;
                const value=this.value
                const max=this.max;
                if(typeof value==='number' && typeof max==='number'){
                    // max value
                    return max<value?`${max}+`:value;
                }
                return value;
            }
        }
    }
</script>